<script>
    init({
      title: 'Pagination Parts',
      desc: 'Use `paginationParts` option to define which parts of the pagination should be visible.',
      links: ['bootstrap-table.min.css'],
      scripts: ['bootstrap-table.min.js']
    })
  </script>

  <style>
    .checkbox {
      float: left;
      margin-right: 15px;
    }
  </style>

  <div class="toolbar">
    <div class="checkbox">
      <label>
        <input type="checkbox" checked>
        <code>pageInfo</code>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">
        <code>pageInfoShort</code>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" checked>
        <code>pageSize</code>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" checked>
        <code>pageList</code>
      </label>
    </div>
  </div>

  <table
    id="table"
    data-url="json/data1.json"
    data-toolbar=".toolbar"
    data-height="400"
    data-pagination="true">
    <thead>
      <tr>
        <th data-field="id">Item ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
      </tr>
    </thead>
  </table>

  <script>
    var $table = $('#table')

    function mounted() {
      $table.bootstrapTable()

      $('.toolbar input').change(function () {
        var paginationParts = []
        $('.toolbar input:checked').map(function () {
          paginationParts.push($(this).next().text())
        })

        $table.bootstrapTable('refreshOptions', {
          paginationParts: paginationParts
        })
      })
    }
  </script>
